<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#333" title-bold title="添加知识分享" title-size="36"></u-navbar>

		<view class="d-id u-padding-24">
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					标题<span class="xing">*</span>
				</view>
				<u-input input-align="right" v-model="title" />
			</view>
			<view class="font_weight u-p-b-22 u-p-t-22">
				详情<span class="xing">*</span>
			</view>
			<view class="textarea-d">
				<piaoyiEditor :maxlength="30000" @changes="saveContens" :readOnly="readOnly" :photoUrl="action" :name="name2"/>
				<!-- <u-input maxlength="0" v-model="content" type="textarea" height="280" placeholder="请输入内容" /> -->
			</view>
			<view class="u-m-t-10 u-m-t-34 flex flex_wrap">
				<view class="addimg addimg-item u-margin-4" v-for="(item,index) in images" :key="index"
				v-if="item.split('.').pop()=='png' || item.split('.').pop()=='jpg'" >
					<image class="addimg"  :src="item" mode="aspectFill"></image>
					
					<view class="del-i" @click.stop="del(item)">
						<u-icon  name="close-circle" color="#333" size="30"></u-icon>
					</view>
				</view>
				<view class="addimg addimg-item u-margin-4" v-for="(item,index) in images" :key="index"
				 v-if="item.split('.').pop()=='mp4'">
				    <video class="addimg"  :src="item" controls></video>
					
					<view class="del-i" @click.stop="del(item)">
						<u-icon  name="close-circle" color="#333" size="30"></u-icon>
					</view>
				 </view>
				<view class="addimgbtn" @click="chooseMedia" v-if="images.length<6">
					<u-icon name="camera" color="#c8c8c8" size="80"></u-icon>
					<view class="font_12_666 u-m-t-10">
						添加图片或视频
					</view>
					<view class="u-m-t-10">
						（最多6张）
					</view>
				</view>
			</view>
		</view>

		<view class="" style="width: 100%;height: 170rpx;"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="$u.throttle(submit, 2000)">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import piaoyiEditor from '../../../components/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		components: {
			piaoyiEditor
		},
		data() {
			return {
				readOnly: false, //是否只读
				name2: 'file',
				
				
				
				wcshow: false,
				name: '',
				phone: '',
				list: [],
				type: '',
				
				// 演示地址，请勿直接使用
				action: '',
				fileList: [],
				
				formData: {
					token: uni.getStorageSync("token")
				},
				
				title:'',
				content:'',
				images: [],
			}
		},
		onLoad() {
			this.action = this.$config.uploadUrl

		},
		methods: {
			saveContens(e) {
				this.content = e.html
			},
			chooseMedia() {
				let that = this
				uni.chooseMedia({
					count: 6,
					mediaType: ['image', 'video'],
					sourceType: ['album'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						const tempFiles = res.tempFiles;
						for (let i = 0; i < tempFiles.length; i++) {
							console.log(tempFiles.length)
							uni.uploadFile({
								url: that.$config.uploadUrl,
								filePath: tempFiles[i].tempFilePath,
								name: 'file',
								formData: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code != 1) {
										uni.showToast({
											title: JSON.parse(uploadFileRes.data).msg,
											icon: 'none'
										})
										return
									}
									that.images.push(JSON.parse(uploadFileRes.data).data.path)
								}
							});
						}
					}
				})
			},
			del(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除吗',
					success: function(res) {
						if (res.confirm) {
							console.log(that.images.indexOf(item))
							that.images.splice(that.images.indexOf(item),1)
						}
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			
			submit(){
				if (!this.title) {
					uni.showToast({
						title: "请输入标题",
						icon: "none"
					});
					return
				}
				if (!this.content) {
					uni.showToast({
						title: "请输入内容",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/saveKnowledgeInfo',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						content:this.content,
						images:this.images.toString(),
						title:this.title
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "新增成功",
							icon: "none"
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			


		}
	}
</script>

<style scoped lang="scss">
	.addimg{
		width: 200rpx;
		height: 200rpx;
		
		
	}
	.addimg-item{
		position: relative;
		.del-i {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			width: 30rpx;
			height: 30rpx;
			// background: #ADADAD;
			z-index: 25;
		}
	}
	.addimgbtn {
		width: 200rpx;
		height: 200rpx;
		border: 1px dashed #C8C8C8;
		text-align: center;
		padding-top: 30rpx;
		color: #C8C8C8;
		font-size: 24rpx;
	}

	.xing {
		color: #FF0000;
	}

	.popupmd {
		width: 554rpx;
		// height: 344rpx;
		background: linear-gradient(180deg, #FFECEA 0%, #FFFFFF 100%);
		padding: 68rpx 24rpx;


		.p-bd {
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;

			.p-btn2 {
				width: 248rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}


	}

	.btn-bo {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.btn_login_btn {
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #fff;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	.d-id {
		width: 702rpx;
		padding: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto;

		.d-item {
			height: 100rpx;

			.d-item-t {
				width: 160rpx;
			}
		}

		.item-vl {
			font-size: 28rpx;
			color: #9695A3;
			width: 256rpx;
			text-align: right;
		}
	}

	.textarea-d {
		width: 640rpx;
		min-height: 280rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;
	}
</style>